<template>
	<view>
		<view class="tabs">
			<u-tabs :list="tabs" :is-scroll="false" active-color="#00BBAA" inactive-color="#666" :current="current" @change="change"></u-tabs>
		</view>
		<view class="train-list">
			<view class="item u-flex" v-for="(item,index) in lists[current]" :key="item.id" @click="jump('/pages/course/course?id=' + item.id)">
				<image :src="item.cover"></image>
				<view class="info">
					<view class="tit u-line-1">{{item.title}}</view>
					<view class="remark u-line-2">{{item.des}}</view>
					<view class="num-p u-flex">
						<view class="num">共{{item.classCount}}节</view>
						<view class="price">{{!item.vip?item.price+'i币':'会员免费'}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{name: '视频'}, {name: '语音'},{name: '图文'}],
				current: 0,//当前tab
				lists:{'0':[],'1':[],'2':[]},
				page:{'0':1,'1':1,'2':1},
				status:{'0':'loading','1':'loading','2':'loading'},
				classify_id:'',
				name:''
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getList(indexs){
				const index = indexs === undefined ? this.current : indexs
				this.status[index] = 'loading'
				this.$u.api.courseList({
					type:index + 1,
					page:this.page[index],
					limit:10,
					classify_id:this.classify_id
				}).then(res=>{
					this.lists[index] = this.page[index] == 1 ? res : this.lists[index].concat(res)
					this.status[index] = res.length  === 10 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			},
		},
		onReachBottom() {
			const index = this.current
			if(this.status[index] == 'loadmore'){
				this.page[index] ++
				this.getList()
			}
		},
		onLoad(o) {
			this.classify_id = o.id || ''
			this.name = o.name || '课程'
			this.getList(0)
			this.getList(1)
			this.getList(2)
		},
		onReady() {
			this.$app.setTitle(this.name)
		}
	}
</script>

<style lang="scss">
	.tabs{position: sticky;top: 0;background-color: #fff;z-index: 9;}
	.train-list{
		padding: 20rpx 60rpx 0;
		.item{
			padding-bottom: 50rpx;
			image{width: 200rpx;height: 200rpx;border-radius: 20rpx;flex-shrink: 0;margin-right: 20rpx;}
			.info{
				overflow: hidden;flex: 1;
				.tit{height: 44rpx;font-weight: bold;font-size: 30rpx;}
				.remark{height: 80rpx;line-height: 40rpx;font-size: 26rpx;text-align: justify;margin: 10rpx 0;}
				.num-p{
					justify-content: space-between;
					.num{font-size: 30rpx;}
					.price{color: $tc;font-weight: bold;font-size: 30rpx;}
				}
			}
		}
	}
</style>
